<!--  -->
<template>
  <div class="showDataPanel">
    <date-switching-component @getData="getData"/>
    <el-table class="tableView"  :expand-row-keys="expands" :row-key="getRowKeys" :data="dataList"
              @expand-change="expandColumn">
      <el-table-column type="expand" align="center" min-width="40">
        <template #default="props">
          <div class="tableColumnView">
            <historical-data-echarts-panel ref="DailyDosageStatisicsBar" class="echartsView"/>
            <el-table :data="props.row.dataList">
              <el-table-column label="采集时间" prop="dataTime" width="90"/>
              <el-table-column label="制热运行时间" align="center"
                               v-if="showColumn.heatingHighSettingAccumulated||showColumn.heatingHighSettingConsumption||showColumn.heatingMediumSettingAccumulated||showColumn.heatingMediumSettingConsumption||showColumn.heatingLowSettingAccumulated||showColumn.heatingLowSettingConsumption">
                <el-table-column label="高档" align="center"
                                 v-if="showColumn.heatingHighSettingAccumulated||showColumn.heatingHighSettingConsumption">
                  <el-table-column prop="heatingHighSettingAccumulated" width="90" v-if="showColumn.heatingHighSettingAccumulated" label="累计值" align="center"/>
                  <el-table-column prop="heatingHighSettingConsumption" width="90"  v-if="showColumn.heatingHighSettingConsumption" label="使用量" align="center"/>
                </el-table-column>
                <el-table-column label="中档" align="center"
                                 v-if="showColumn.heatingMediumSettingAccumulated||showColumn.heatingMediumSettingConsumption">
                  <el-table-column prop="heatingMediumSettingAccumulated" width="90" v-if="showColumn.heatingMediumSettingAccumulated" label="累计值" align="center"/>
                  <el-table-column prop="heatingMediumSettingConsumption" width="90" v-if="showColumn.heatingMediumSettingConsumption" label="使用量" align="center"/>
                </el-table-column>
                <el-table-column label="低档" align="center"
                                 v-if="showColumn.heatingLowSettingAccumulated||showColumn.heatingLowSettingConsumption">
                  <el-table-column prop="heatingLowSettingAccumulated" width="90" v-if="showColumn.heatingLowSettingAccumulated" label="累计值" align="center"/>
                  <el-table-column prop="heatingLowSettingConsumption" width="90" v-if="showColumn.heatingLowSettingConsumption" label="使用量" align="center"/>
                </el-table-column>
              </el-table-column>
              <el-table-column label="制冷运行时间" align="center"
                               v-if="showColumn.coolingHighSettingAccumulated||showColumn.coolingHighSettingConsumption||showColumn.coolingMediumSettingAccumulated||showColumn.coolingMediumSettingConsumption||showColumn.coolingLowSettingAccumulated||showColumn.coolingLowSettingConsumption">
                <el-table-column label="高档" align="center" v-if="showColumn.coolingHighSettingAccumulated||showColumn.coolingHighSettingConsumption">
                  <el-table-column prop="coolingHighSettingAccumulated" width="90" v-if="showColumn.coolingHighSettingAccumulated" label="累计值" align="center"/>
                  <el-table-column prop="coolingHighSettingConsumption" width="90" v-if="showColumn.coolingHighSettingConsumption" label="使用量" align="center"/>
                </el-table-column>
                <el-table-column label="中档" align="center" v-if="showColumn.coolingMediumSettingAccumulated||showColumn.coolingMediumSettingConsumption">
                  <el-table-column prop="coolingMediumSettingAccumulated" width="90" v-if="showColumn.coolingMediumSettingAccumulated" label="累计值" align="center"/>
                  <el-table-column prop="coolingMediumSettingConsumption" width="90" v-if="showColumn.coolingMediumSettingConsumption" label="使用量" align="center"/>
                </el-table-column>
                <el-table-column label="低档" align="center" v-if="showColumn.coolingLowSettingAccumulated||showColumn.coolingLowSettingConsumption">
                  <el-table-column prop="coolingLowSettingAccumulated" width="90" v-if="showColumn.coolingLowSettingAccumulated" label="累计值" align="center"/>
                  <el-table-column prop="coolingLowSettingConsumption" width="90" v-if="showColumn.coolingLowSettingConsumption" label="使用量" align="center"/>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="presetTemperature" v-if="showColumn.presetTemperature" width="90" label="'设定温度℃'" align="center"/>
              <el-table-column prop="indoorTemperature" v-if="showColumn.indoorTemperature" width="90" label="'室内温度℃'" align="center"/>
              <el-table-column prop="onOffState" label="开关状态"  width="90" align="center"/>
              <el-table-column prop="powerMode" label="模式" width="90" align="center"/>
              <el-table-column prop="airflowMode" label="风机模式" width="90" align="center"/>
            </el-table>
          </div>
        </template>
        <template #header>
          <el-popover
              placement="bottom"
              trigger="click"
              :visible="visible">
            <transition name="fade">
              <div class="elPopover">
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-model="showColumn.heatingHighSettingAccumulated">制热高档运行值</el-checkbox>
                  <el-checkbox v-model="showColumn.heatingHighSettingConsumption">制热高档使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.heatingMediumSettingAccumulated">制热中档运行值</el-checkbox>
                  <el-checkbox v-model="showColumn.heatingMediumSettingConsumption">制热中档使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.heatingLowSettingAccumulated">制热低档运行值</el-checkbox>
                  <el-checkbox v-model="showColumn.heatingLowSettingConsumption">制热中档使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.coolingHighSettingAccumulated">制冷高档运行值</el-checkbox>
                  <el-checkbox v-model="showColumn.coolingHighSettingConsumption">制冷高档使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.coolingMediumSettingAccumulated">制冷中档运行值</el-checkbox>
                  <el-checkbox v-model="showColumn.coolingMediumSettingConsumption">制冷中档使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.coolingLowSettingAccumulated">制冷低档运行值</el-checkbox>
                  <el-checkbox v-model="showColumn.coolingLowSettingConsumption">制冷低档使用量</el-checkbox>
                  <el-checkbox v-model="showColumn.presetTemperature">设定温度 </el-checkbox>
                  <el-checkbox v-model="showColumn.indoorTemperature">室内温度</el-checkbox>
                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <svg-icon icon-class="set" class="setSvg" @click="visible = true"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="rangeName" label="区域名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceName" label="设备名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceNo" label="设备编号" align="center" :render-header="renderHeader"/>
      <el-table-column label="制热运行时间" align="center">
        <el-table-column label="高档" align="center">
          <el-table-column prop="heatingHighSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="heatingHighSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
        <el-table-column label="中档" align="center">
          <el-table-column prop="heatingMediumSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="heatingMediumSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
        <el-table-column label="低档" align="center">
          <el-table-column prop="heatingLowSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="heatingLowSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
      </el-table-column>
      <el-table-column label="制冷运行时间" align="center">
        <el-table-column label="高档" align="center">
          <el-table-column prop="coolingHighSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="coolingHighSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
        <el-table-column label="中档" align="center">
          <el-table-column prop="coolingMediumSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="coolingMediumSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
        <el-table-column label="低档" align="center">
          <el-table-column prop="coolingLowSettingAccumulated" label="累计值" align="center" :render-header="renderHeader"/>
          <el-table-column prop="coolingLowSettingConsumption" label="使用量" align="center" :render-header="renderHeader"/>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="presetTemperature" label="设定温度℃" align="center" :render-header="renderHeader"/>
      <el-table-column prop="indoorTemperature" label="室内温度℃" align="center" :render-header="renderHeader"/>
      <el-table-column prop="onOffState" label="开关状态" align="center" :render-header="renderHeader"/>
      <el-table-column prop="powerMode" label="模式" align="center" :render-header="renderHeader"/>
      <el-table-column prop="airflowMode" label="风机模式" align="center" :render-header="renderHeader"/>
    </el-table>
  </div>
</template>

<script>
import DateSwitchingComponent from "@/components/DateSwitchingComponent.vue";
import HistoricalDataEchartsPanel from "@/views/data/components/HistoricalDataEchartsPanel.vue";
import {setEchartsData} from '../../../utils/public'
let component;
import moment from 'moment';
import _ from "underscore";
import {h} from "vue";

export default {
  data() {
    return {
      visible: false,
      showColumn: {
        heatingHighSettingAccumulated: true,
        heatingHighSettingConsumption: true,
        heatingMediumSettingAccumulated: true,
        heatingMediumSettingConsumption: false,
        heatingLowSettingAccumulated: false,
        heatingLowSettingConsumption: false,
        coolingHighSettingAccumulated: false,
        coolingHighSettingConsumption: false,
        coolingMediumSettingAccumulated: false,
        coolingMediumSettingConsumption: false,
        coolingLowSettingAccumulated: false,
        coolingLowSettingConsumption: false,
        presetTemperature: false,
        indoorTemperature: false
      },
      dataList: [],
      showChartsData:{},
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      },
      expands: [], // 只展开一行放入当前行id
      getRowKeys: (row) => { // 获取当前行id
        return row.deviceNo; // 这里看这一行中需要根据哪个属性值是id
      }
    };
  },
  components: {DateSwitchingComponent,HistoricalDataEchartsPanel},
  methods: {
    renderHeader({column}) {
      let realWidth = 0;
      let span = document.createElement('span');

      span.innerText = column.label;
      document.body.appendChild(span);

      realWidth = span.getBoundingClientRect().width;
      column.minWidth = realWidth + 40; // 可能还有边距/边框等值，需要根据实际情况加上

      document.body.removeChild(span);
      return h('span', column.label);
    },
    expandColumn(row, expandedRows) {
      // 每次只展开一行
      if (expandedRows.length) {
        component.expands = []
        if (row) {
          component.expands.push(row.deviceNo);
          component.showChartsData=row.chart;
          setEchartsData(component);
        }
      } else {
        component.expands = []
      }
    },
    saveColumn() {
      //持久化存储
      localStorage.setItem("historyTemperartureA", JSON.stringify(this.showColumn))
      this.visible = false;
      if(component.expands.length==0) return;
      setEchartsData(component);
    },
    getData(data, type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType = type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
    if (localStorage.getItem("historyTemperartureA")) {
      this.showColumn = JSON.parse(localStorage.getItem("historyTemperartureA"))
    } else {
      this.showColumn = {
        heatingHighSettingAccumulated: true,
        heatingHighSettingConsumption: true,
        heatingMediumSettingAccumulated: true,
        heatingMediumSettingConsumption: false,
        heatingLowSettingAccumulated: false,
        heatingLowSettingConsumption: false,
        coolingHighSettingAccumulated: false,
        coolingHighSettingConsumption: false,
        coolingMediumSettingAccumulated: false,
        coolingMediumSettingConsumption: false,
        coolingLowSettingAccumulated: false,
        coolingLowSettingConsumption: false,
        presetTemperature: false,
        indoorTemperature: false
      };
    }
  }
}

</script>
<style lang='scss'>
</style>